
<template>
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
  <div>
    <span><b>保障服务</b></span>

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>。</van-swipe-item>
    </van-swipe>
<router-link  v-for="(item,index) in 4" :key="index" :to="index % 2 ? '/shopA?id='+index:'/shopB/'+index">
    <van-grid :column-num="3">
      <van-grid-item v-for="value in 3" :key="value" icon="photo-o" text="文字">
        <h1>XXXX</h1>
        <span>XXXX</span>
      </van-grid-item>
    </van-grid>
</router-link>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
    
        <van-card
          :num="index"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        />
    <!-- </router-link> -->
      
    </van-list>

    <van-tabbar v-model="active">
      <van-tabbar-item icon="wap-home-o
">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o
">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="contact-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
  </van-pull-refresh>
</template>
<script setup>
import { ref } from "vue";
const active = ref(0);

const list = ref([]);
const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1);
    }

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};
import { showToast } from 'vant';
const count = ref(0);
    const onRefresh = () => {
      setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        count.value++;
      }, 1000);
    };
</script>
<style lang="scss">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #ed39c0;
}
</style>